---
title: 玩转gsap

pubDatetime: 2023-08-31T06:44:27Z
postSlug: gsap
featured: false
draft: false
tags:
  - npm
  - gsap
description: "gsap"
---

### gsap

GSAP（GreenSock Animation Platform）是一个专业级的 JavaScript 动画库，用于现代 Web 动画。它可以对 JavaScript 可以操作的所有内容进行动画处理（CSS 属性，SVG，React，画布，通用对象等），同时解决了不同浏览器上存在的兼容性问题，而且速度极快（比 jQuery 快 20 倍）¹。大约有 1000 万个站点和许多主要品牌都使用 GSAP³。

> (1) GSAP - GreenSock. https://greensock.com/gsap/.

> (2) GSAP（GreenSock）：最健全的 web 动画库之一 - 知乎. https://zhuanlan.zhihu.com/p/145332205.

> (3) gsap - npm. https://www.npmjs.com/package/gsap.

### scrollTriger

import ScrollTriger from "@components/react/gsap/ScrollTriger";

<ScrollTriger client:load></ScrollTriger>

```tsx
import gsap from "gsap";
import { useEffect } from "react";

const App = () => {
  const items = ["color-warm-frame", "color-spring-warmth", "color-night-fade"];
  useEffect(() => {
    import("gsap/ScrollTrigger").then(res => {
      const ScrollTrigger = res.default;
      gsap.registerPlugin(ScrollTrigger);
      gsap.to(`.${items[items.length - 1]}`, {
        x: "40vmin",
        duration: 3,
        rotation: 360,
        scrollTrigger: {
          trigger: `.${items[items.length - 1]}`,
          start: "top center",
          end: "top 100px",
          scrub: true,
          markers: true,
          id: "box3",
        },
      });
      const anim = gsap.to(`.${items[0]}`, {
        x: "40vmin",
        rotation: 360,
        duration: 3,
      });
      ScrollTrigger.create({
        trigger: `.${items[0]}`,
        animation: anim,
        start: "top 500px",
        end: "top 50px",
        scrub: true,
        markers: true,
        id: "box1",
      });
    });
  });
  return (
    <div>
      <ul className="grid grid-cols-1 gap-5">
        {items.map((item, index) => (
          <li
            key={index}
            className={`flex min-h-[40vmin] max-w-[40vmin] items-center justify-center rounded-md transition-all hover:scale-105 ${item}`}
          >
            box{index + 1}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default App;
```

### MotionPath

import MotionPath from "@components/react/gsap/MotionPath";

<MotionPath client:load />

```tsx
useEffect(() => {
  import("gsap/MotionPathPlugin").then(res => {
    const MotionPathPlugin = res.default;
    gsap.registerPlugin(MotionPathPlugin);
    gsap.set(".astronaut", { scale: 0.5, autoAlpha: 1 });
    const anim = gsap.to(".astronaut", {
      duration: 5,
      ease: "power1.inOut",
      immediateRender: true,
      motionPath: {
        path: "#path",
        align: "#path",
        alignOrigin: [0.5, 0.5],
        autoRotate: 90,
      },
    });

    import("gsap/ScrollTrigger").then(res => {
      const ScrollTrigger = res.default;
      ScrollTrigger.create({
        trigger: `.astronaut`,
        animation: anim,
        start: "top 400px",
        end: "top 150px",
        scrub: true,
        markers: true,
        id: "astronaut",
      });
    });
  });
});
```

### MouseEffect

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="oNVBJqd" data-preview="true" data-user="ajn404" >

</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
